<template>
    <el-card>
        <div class="arrange-panel-header">
            <div class="class-profiles">
                <div class="title">{{heardTitle}}</div>
            </div>
            <el-button class="float-right" @click="back">{{$t('common.btn.back')}}</el-button>
        </div>
        <div style="margin-top: 24px;">
            <el-form
                :model="coursesQueryForm"
                label-position="right"
                label-width="80px"
                label-suffix=":"
            >
                <el-row :gutter="24">
                    <el-col :offset="2" :span="8">
                        <el-form-item :label="$t('course.college')">
                            <el-select v-model="coursesQueryForm.college" style="width: 100%;">
                                <el-option
                                    v-for="item in options.college"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('label.trainingLevel')">
                            <el-select
                                v-model="coursesQueryForm.trainingLevel"
                                style="width: 100%;"
                            >
                                <el-option
                                    v-for="item in options.trainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <div class="float-right">
                            <el-button @click="resetCoursesQuery">{{$t("message.reset")}}</el-button>
                            <el-button
                                type="primary"
                                @click="getCoursesByCondition()"
                            >{{$t("message.filter")}}</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div style="border-top:1px solid #ccc;height:1px;margin-bottom:20px"></div>
            <div class="edu-opertion-bar">
                <div
                    class="edu-page-title"
                    style="margin-bottom: 16px;font-size:16px"
                >{{$t('courseArrange.engAutoArrange.courseList')}}</div>
                <div class="float-left">
                    <el-input
                        v-model="coursesQueryForm.condition"
                        :placeholder="$t('course.inputCourseTip')"
                        style="width:200px"
                        @keyup.enter.native="getCoursesByCondition()"
                    >
                        <i
                            class="el-icon-search"
                            slot="suffix"
                            style="margin-top:10px;cursor:pointer"
                            @click="getCoursesByCondition()"
                        ></i>
                    </el-input>
                </div>
            </div>
            <edu-table
                :data="courses"
                @selection-change="chooseAddCourse"
                @page-change="handleCourseCurrentChange"
                :total="coursesQueryForm.total_"
                :pageSize="coursesQueryForm.pageSize_"
                :current-page="coursesQueryForm.pageNum_"
            >
                <edu-table-column prop="code" :label="$t('course.courseCode')"></edu-table-column>
                <edu-table-column prop="name" :label="$t('course.courseName')"></edu-table-column>
                <edu-table-column prop="college" :label="$t('course.college')"></edu-table-column>
                <edu-table-column prop="credits" :label="$t('course.score')"></edu-table-column>
                <edu-table-column prop="period" :label="$t('course.period')"></edu-table-column>
            </edu-table>
            <el-row :gutter="24">
                <el-col :span="24">
                    <div class="float-right no-bottom no-right" style="margin-top:10px">
                        <el-button @click="closeCourseDialog">{{$t("message.cancel")}}</el-button>
                        <el-button type="primary" @click="addCourses">{{$t("message.confirm")}}</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>
<script>
import {
    getCourses,
    getCoursesByCondition,
    addCourses
} from "common/src/api/resource/publicCourse";

export default {
    name: "LevelAddCourseComponent",
    props: {
        heardTitle: {
            type: String
        },
        options: {
            type: Object
        }
    },
    data() {
        return {
            categoryId: "",
            coursesQueryForm: {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
                college: "",
                trainingLevel: "",
                condition: "",
                //isElective: 1,
                status: 3,
                managerDeptId: "1"
            },
            chooseAddCourses: [],
            courses: []
        };
    },
    created() {},
    computed: {},
    methods: {
        //重置课程筛选条件
        resetCoursesQuery() {
            this.coursesQueryForm.trainingLevel = "";
            this.coursesQueryForm.college = "";
            this.coursesQueryForm.condition = "";
        },
        //查询课程列表
        getCoursesByCondition(categoryId) {
            if (categoryId) {
                this.categoryId = categoryId;
                this.resetCoursesQuery();
            }
            getCourses(this.coursesQueryForm).then(res => {
                if (res.code == 200) {
                    this.coursesQueryForm.total_ = res.data.total_;
                    this.courses = res.data.list;
                }
            });
        },
        handleCourseCurrentChange(val) {
            this.coursesQueryForm.pageSize_ = val.pageSize;
            this.coursesQueryForm.pageNum_ = val.pageNum;
            this.getCoursesByCondition();
        },

        closeCourseDialog() {
            this.back();
        },

        chooseAddCourse(val) {
            this.chooseAddCourses = val;
        },

        //添加课程
        addCourses() {
            if (this.chooseAddCourses.length == 0) {
                this.$message({
                    type: "info",
                    message: this.$t("courses.plsChooseCourses")
                });
                return;
            }
            let data = {
                categoryId: this.categoryId,
                type: 2,
                coursesCategoryRelList: []
            };
            this.chooseAddCourses.forEach(c => {
                data.coursesCategoryRelList.push({
                    courseCode: c.code
                });
            });
            addCourses(data).then(res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: this.$t("common.tips.addSuccess")
                    });
                    //this.getCoursesMaintain();
                    this.back();
                }
            });
        },

        back() {
            this.$emit("back");
        }
    }
};
</script>

<style lang="scss" scoped>
.arrange-panel-header {
    height: 56px;
    border-bottom: 2px solid #dcdfe6;
    cursor: default;
    .title {
        font-size: 20px;
        color: #000;
        font-weight: bold;
    }
    .class-profiles {
        float: left;
        width: 40%;
        div {
            padding: 5px 0;
        }
    }
}
</style>

